<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="FormData"
          :model="FormData"
          label-width="110px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="车辆类型:"
                label-width="80px"
              >
                <el-select
                  v-model="FormData.carType"
                  clearable
                  style="width: 100%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in carTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="车牌号码:"
                label-width="80px"
              >
                <el-input
                  v-model.trim="FormData.carNumber"
                  placeholder="请输入车牌号码"
                />
              </el-form-item>
            </el-col>
            <el-col
              style="padding-left:30px"
              :span="8"
            >
              <el-button
                type="warning"
                @click="searchCar"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <TabChange
        :default-active-index="0"
        :setting-list="settingList"
        @tabChange="tabChange"
      ></TabChange>

      <el-card
        shadow="never"
        class="table-card-box"
      >
        <el-button
          type="warning"
          style="margin-bottom:20px"
          @click="handleDispatch()"
        >新增车辆</el-button>
        <el-table
          :key="tableKey"
          ref="multipleTable"
          :data="dataList"
          fit
          style="width: 100%"
          stripe
          :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
        >
          <div
            v-show="(!dataList || dataList.length <= 0) && !listLoading && !searchkey"
            slot="empty"
          >
            <img
              src="@/icons/pic-kong@2x.png"
              alt="img"
              style="margin-top: 20px;width: 14%;height: 14%;"
            >
            <p style="margin-top: -20px; padding-bottom: 0px;">这里空空如也</p>
          </div>
          <el-card
            v-show="(!dataList || dataList.length <= 0) && !listLoading && searchkey"
            slot="empty"
            class="table-empty-box"
            shadow="never"
          >
            <empty></empty>
          </el-card>
          <el-table-column
            align="left"
            type="index"
            :index="indexMethod"
            label="序号"
            width="60"
          >
          </el-table-column>
          <el-table-column
            label="车牌号码"
            prop="licensePlate"
            min-width="95"
          >
          </el-table-column>
          <el-table-column
            label="车辆类型"
            prop="truckTypeName"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="driverNum"
            label="司机数量"
            min-width="95"
          >
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="车辆状态"
            min-width="95"
          >
          </el-table-column>

          <el-table-column
            label="GPS设备ID"
            min-width="120"
            prop="deviceGpsId"
          >
          </el-table-column>
          <el-table-column
            label="实载重量（T）"
            min-width="120"
            prop="allowableLoad"
          >
          </el-table-column>
          <el-table-column
            label="实载体积（方）"
            min-width="170"
            prop="allowableVolume"
          >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="220"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="lookDetail(scope)"
              >查看详情</el-link>
              <span class="line">|</span>
              <el-link
                type="primary"
                :underline="false"
                @click="isUse(scope)"
              >启用</el-link>
              <span class="line">|</span>
              <el-link
                type="primary"
                :underline="false"
                @click="configureDriver(scope)"
              >配置司机</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->

        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              :current-page="+FormData.page"
              :total="+total"
              :page-size="+FormData.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <vehicleDialog
          ref="vDialog"
          :car-type-list="carTypeList"
          class="add-form-dialog"
          @submitForm="getCarList"
        />
      </el-card>
    </div>
  </div>
</template>
<script>
import TabChange from '@/components/TabChange'
import { truckList, getCarTypeList } from '@/api/transit.js'
import vehicleDialog from './components/vehicle-add.vue'

export default {
  name: 'Vehicle',
  components: { TabChange, vehicleDialog },
  data() {
    return {
      fullList: [],
      carTypeList: [],
      FormData: {
        // 车辆类型
        carType: '',
        // 车牌号码
        carNumber: ''
      },
      settingList: [
        {
          value: 0,
          label: '全部',
          num: 0
        },
        {
          value: 1,
          label: '可用',
          num: 0
        },
        {
          value: 2,
          label: '停用',
          num: 0
        }
      ],
      dataList: [],
      tableKey: 0,
      listLoading: false,
      searchkey: false,
      data: {
        page: 1,
        pageSize: 10
      },
      total: '',
      id: 123
    }
  },
  created() {
    this.getCarList()
    this.carTyp()
  },
  methods: {
    // 重置
    resetForm() {
      this.FormData = {
        carType: '',
        carNumber: ''
      }
      this.getCarList()
    },
    // 搜索
    searchCar() {
      const { carType, carNumber } = this.FormData
      if (carType !== '' && carNumber !== '') {
        this.dataList = this.fullList.filter(item => item.truckTypeName === carType && item.licensePlate.includes(carNumber))
        this.total = this.dataList.length
      }
      if (carType !== '' && carNumber === '') {
        this.dataList = this.fullList.filter(item => item.truckTypeName === carType)
        this.total = this.dataList.length
      }
      if (carType === '' && carNumber !== '') {
        this.dataList = this.fullList.filter(item => item.licensePlate.includes(carNumber))
        this.total = this.dataList.length
      }
      if (carType === '' && carNumber === '') {
        this.getCarList()
      }
      this.setList()
    },
    // 获取汽车类型下拉框
    async carTyp() {
      const { data } = await getCarTypeList()
      this.carTypeList = data
    },
    async setList() {
      this.dataList.forEach(item => {
        item.workStatus = item.workStatus ? '启用' : '停用'
      })
    },
    // 获取列表
    async getCarList() {
      const { data } = await truckList(this.data)
      this.total = data.counts
      this.dataList = data.items
      this.setList()
      const { data: { items }} = await truckList({ page: 1, pageSize: 99999 })
      this.fullList = items
      this.settingList[0].num = items.length
      this.settingList[1].num = items.filter(item => item.workStatus === 1).length
      this.settingList[2].num = items.filter(item => item.workStatus === 0).length
    },
    // 状态变更
    async tabChange(activeIndex) {
      // 获取已经启用的车辆
      if (activeIndex === 1) {
        this.data.workStatus = 1
      }
      // 获取已经停用的车辆
      if (activeIndex === 2) {
        this.data.workStatus = 0
      }
      this.getCarList()
      this.data = {
        page: 1,
        pageSize: 10
      }
    },
    // 改变大小
    handleSizeChange(value) {
      this.data.pageSize = value
      this.getCarList(this.data)
    },
    // 页面改变
    handleCurrentChange(value) {
      this.data.page = value
      this.getCarList(this.data)
    },
    // 查看详情
    lookDetail(scope) {
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: {
          id: this.id
        }
      })
    },
    // 启用，禁用
    isUse(scope) {
      console.log(scope)
    },
    // 配置司机
    configureDriver(scope) {
      console.log(scope)
    },
    // 序号配置
    indexMethod(index) {
      return (this.data.page - 1) * 10 + index + 1
    },
    // 点击新增
    handleDispatch() {
      this.$refs.vDialog.openDialog()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.line{
  margin-right: 5px;
  margin-left: 5px;
}
.table-card-box{
  margin-top: 20px;
}
.search-card-box{
  height: 81px;
}
.startconfirm{
    width: 481px;
    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
</style>

